<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/vue-2.6.12.js"></script>
  <script src="../js/vue-router.js"></script>
  
</head>
<body>
  <div id="app" >
    <div >
        <router-link to="/book/show"><button >查询</button></router-link>
        <router-link to="/book/add"><button >添加</button></router-link>
        <hr>
        <router-view></router-view>
    </div>
</div>
<template id="my-table">
    <table border="1">
        <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>price</th>
                <th>stock</th>
                <th>operation</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="b in books" :key="b.id">
                <td>{{b.id}}</td>
                <td>{{b.name}}</td>
                <td>{{b.price}}</td>
                <td>{{b.stock}}</td>
                <td>
                    <button>删除</button>
                    <router-link :to="{path:'/book/update',query:b}"><button>更新</button></router-link>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<template id="add-form">
    <form action="">
        name: <input type="text" name="" id=""> <br>
        price: <input type="number" name="" id=""> <br>
        stock: <input type="number" name="" id=""> <br>
        <input type="submit" value="添加">
    </form>
</template>
<template id="update-form">
    <form action="" @submit.prevent="">
        <input type="hidden" v-model="pro.id">
        name: <input type="text" v-model="pro.name" > <br>
        price: <input type="number" v-model="pro.price" > <br>
        stock: <input type="number" v-model="pro.stock" > <br>
        <input type="submit" value="更新">
    </form>
</template>
<script>
    const addForm = {
        template:"#add-form"           
    }

    const updateForm = {
        template:"#update-form",
        data:function(){
          return {
            pro:$route.query
          };
        }
    };

    const myTable = {
        template:"#my-table",
        data(){
            return {
                books:[
                    {id:1,name:"十万个为什么",price:100000.0,stock:1},
                    {id:2,name:"vue从入门到放弃",price:19800.0,stock:2}
                ]
            }
        }
    }

    const router = new VueRouter({
        routes:[
            {path:"/book/show",component:myTable},
            {path:"/book/add",component:addForm},
            {path:"/book/update",component:updateForm},
            {name:"book",path:"/book/:id",component:updateForm}
        ]
    });

    const vm = new Vue({
        el:"#app",
        router
    })
</script>
</body>
</html>